<template>
  <div>
    <div style="margin: 10px 0;width: 100%;height: 40px;">
      <el-form :model="topicinput" size="small" class="demo-form-inline" :inline="true">
        <el-form-item>
          <span style="font-weight: bold;color: dimgray;margin-left: 20px;">话题名称:</span><el-input :clearable="true"
            style="width: 200px" placeholder="请输入话题名称" suffix-icon="el-icon-search"
            v-model="topicinput.topicName"></el-input>
        </el-form-item>
        <el-form-item>
          <span style="font-weight: bold;color: dimgray;margin-left: 20px;">状态:</span><el-select
            v-model="topicinput.topicStatus" :clearable="true" placeholder="请选择状态">
            <el-option label="启用" value="0"></el-option>
            <el-option label="禁用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <span style="font-weight: bold;color: dimgray;margin-left: 20px;line-height: 30px;font-size: 14px;">创建时间:</span>
        <el-form-item lable="">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
              v-model="topicinput.StartTime" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
              v-model="topicinput.EndTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" style="margin-left: 10px;"
          @click="topicqueryAll()">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" type="button" @click="resettopicinput">重置</el-button>
      </el-form>
    </div>
    <div style="width: 100%;height: 30px;">
      <el-button style="margin-left: 20px;" type="primary" plain icon="el-icon-plus" size="mini"
        v-hasPermi="['system:topic:add']" @click="dialogFormVisible = true">新增</el-button>
    </div>
    <div style="text-align: center;display: flex;margin-top: 10px;">
      <el-table :data="topicList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%;">
        <el-table-column type="selection" width="50px"></el-table-column>
        <el-table-column prop="topicId" label="序号" align="center" style="width: 30px;"></el-table-column>
        <el-table-column prop="topicName" label="话题名称" align="center" style="100px"></el-table-column>
        <el-table-column prop="topicDiscribe" label="话题描述" align="center" style="100px"></el-table-column>
        <el-table-column prop="topicStatus" label="话题状态" style="width: 100px;margin-left: 80px;">
          <template slot-scope="scope">
            <div v-if="scope.row.topicStatus == '0'" style="width: 40px;
                                                            height: 25px;
                                                            border-radius: 4px;
                                                            background-color: rgb(225, 243, 216);">
              <span style="color: rgb(82, 155, 49);
                           display: flex;
                           align-items: center;
                           line-height: 25px;
                           justify-content: center;
                           font-size: 10px;">启用
              </span>
            </div>
            <div v-if="scope.row.topicStatus == '1'" style="width: 40px;
                                                            height: 25px;
                                                            border-radius: 4px;
                                                            background-color: rgb(253, 240, 240);">
              <span style="color: rgb(193, 87, 88);
                           display: flex;
                           align-items: center;
                           line-height: 25px;
                           justify-content: center;
                           font-size: 10px;">禁用
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" style="width: 100px;"></el-table-column>
        <el-table-column label="操作" align="center" style="width: 100px;">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit"
              @click="topicUpdateSel(scope.row.topicId); dialogFormVisibleUpdate = true ">编辑</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="topicDelete(scope.row.topicId);">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="block" style="margin-top:15px;text-align: center;">
      <el-pagination style="align:center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="topicList.length">
      </el-pagination>
    </div>

    <!-- 新增弹框 -->
    <el-dialog title="添加话题" :visible.sync="dialogFormVisible" width="400px" height="200px">
      <el-form :model="topicAddform">
        <h4 style="text-align: center;font-weight: 600;line-height: 30px;">话题信息</h4>
        <el-form-item label="话题名称:" :label-width="formLabelWidth">
          <el-input v-model="topicAddform.topicName" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="话题描述" :label-width="formLabelWidth">
          <el-input v-model="topicAddform.topicDiscribe" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; cancel()">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false; topicAdd(); cancel()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog title="修改话题" :visible.sync="dialogFormVisibleUpdate" width="400px" height="200px">
      <el-form :model="topicUpdateform">
        <h4 style="text-align: center;font-weight: 600;line-height: 30px;">话题信息</h4>
        <el-form-item label="话题名称:" :label-width="formLabelWidth">
          <el-input v-model="topicUpdateform.topicName" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="话题描述" :label-width="formLabelWidth">
          <el-input v-model="topicUpdateform.topicDiscribe" autocomplete="off" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="话题状态" :label-width="formLabelWidth">
          <el-select v-model="topicUpdateform.topicStatus" :clearable="true" placeholder="请选择状态">
            <el-option label="启用" value="0"></el-option>
            <el-option label="禁用" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleUpdate = false; cancel()">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleUpdate = false; topicUpdate();cancel()">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {
    topicqueryAll,
    insertTopic,
    topicDelete,
    topicUpdate,
    topicUpdateSels
  } from "@/api/topic/topic";
  import axios from 'axios';
  export default {
    name: 'Vue',
    data() {
      return {
        currentPage: 1,
        total: 20,
        pageSize: 5,
        dialogFormVisible: false,
        dialogFormVisibleUpdate: false,
        multipleSelection: [],
        formLabelWidth: '100px',
        topicAddform: {
          topicName: '',
          topicDiscribe: ''
        },
        topicUpdateform: {
          topicId: '',
          topicName: '',
          topicDiscribe: '',
          topicStatus: ''
        },
        topicinput: {
          topicName: '',
          topicStatus: '',
          StartTime: '',
          EndTime: ''
        },
        topicList: [],
      }
    },
    created() {
      this.topicqueryAll()
    },
    methods: {
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val
      },
      // 加载话题管理列表
      topicqueryAll() {
        topicqueryAll(this.topicinput).then(resp => {
          this.topicList = resp.data;
        })
      },
      // 话题管理添加方法
      topicAdd() {
        insertTopic(this.topicAddform).then(resp => {
          if (resp.data == "SAVE_OK") {
            this.topicqueryAll();
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
          } else {
            this.$message({
              type: 'error',
              message: '添加失败!'
            });
            this.topicqueryAll();
          }
        }).catch(message => {
          this.$message({
            type: 'error',
            message: message
          });
          this.topicqueryAll();
        })
      },
      // 话题管理删除方法
      topicDelete(id) {
        this.$confirm('此操作将永久删除id为' + id + '的数据，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          topicDelete({
            topicId: id,
          }).then(resp => {
            if (resp.data == "DELETE_OK") {
              this.topicqueryAll();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            } else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
              this.topicqueryAll();
            }
          }).catch(message => {
            this.$message({
              type: 'error',
              message: message
            });
            this.topicqueryAll();
          })
        })
      },
      //话题修改方法
      topicUpdate(id) {
        topicUpdate(this.topicUpdateform).then(resp => {
          if (resp.data == "UPDATE_OK") {
            this.topicqueryAll();
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          } else {
            this.$message({
              type: 'error',
              message: '修改失败!'
            });
            this.topicqueryAll();
          }
        }).catch(message => {
          this.$message({
            type: 'error',
            message: message
          });
          this.topicqueryAll();
        })
      },
      // 话题管理修改弹框参数回显
      topicUpdateSel(topicId) {
        topicUpdateSels({
          topicId: topicId
        }).then(resp => {
          this.topicUpdateform = resp.data;
        })
      },
      //form表单重置按钮
      resettopicinput() {
        this.topicinput = {}
        this.resetForm("topicinput");
      },
      //清空弹框输入框内容方法
      cancel() {
        this.topicAddform = {};
      }
    },
  }
</script>

<style></style>